{% extends "admin/base/base_add.html" %}
{% block form %}
    <form role="form" method="post" class="form form-horizontal" id="form-admin-add" enctype="multipart/form-data">
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>{{ form.name.label }}：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.name }}
                {% for error in form.name.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>{{ form.image.label }}</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.image }}
                {% for error in form.image.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>{{ form.smallimage.label }}</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.smallimage }}
                {% for error in form.smallimage.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>{{ form.keywords.label }}：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.keywords }}
                {% for error in form.keywords.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">{{ form.description.label }}：</label>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.description }}
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
                {% for error in form.description.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                {{ form.csrf_token }}
                {{ form.submit }}

            </div>
        </div>
    </form>
{% endblock %}
{% block frontend %}
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/jquery.validate.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/validate-methods.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/messages_zh.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='admin/h-ui.admin/js/dialog.js') }}"></script>
    {% for message in get_flashed_messages(category_filter=["error"]) %}
        <script type="text/javascript">
            var msg = "{{ message }}";
            if (msg) {
                dialog.error(msg);
            }
        </script>
    {% endfor %}
    {% for message in get_flashed_messages(category_filter=["ok"]) %}
        <script type="text/javascript">
            var msg = "{{ message }}";
            if (msg) {
                dialog.success(msg);
            }
        </script>
    {% endfor %}
    <script type="text/javascript">
        $(function () {
            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });

            $("#form-admin-add").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2,
                        maxlength: 16
                    }
                }
            });
        });
    </script>
{% endblock %}